import React, { useState } from 'react';
import { Button, Divider } from 'antd';
import { fakeRequest } from './service';
import styles from './style.less';



const fakeRequestController = new AbortController();
let signal = fakeRequestController.signal;

const QueueExamples = () => {
  const [count, setCount] = useState(0);

  const handleAdd = () => {
    try {
      fakeRequest({ count }, { signal }).then(res => {
        console.log(res)
        if (res) {
          const { count: newCount } = res;
          setCount(newCount)
        }
      })
    } catch (error) {
      console.error(error)
    }
  }

  const handleCancel = () => {
    fakeRequestController.abort()
  }

  const handleLook = () => {
    console.log({ signal, fakeRequestController })
  }

  return (
    <div className={styles.content}>
      <span>{count}</span>
      <Divider type="vertical" />
      <Button onClick={handleAdd}>加一</Button>
      <Divider type="vertical" />
      <Button onClick={handleCancel}>取消</Button>
      <Divider type="vertical" />
      <Button onClick={handleLook}>打印</Button>
    </div>
  )
}

export default QueueExamples;